<template>
  <UniversalEcharts :options="options"/>
</template>

<script>
import UniversalEcharts from "@/views/reports/components/universal-echarts.vue";
import * as echarts from 'echarts';
export default {
  name: "echarts-one",
  components: {
    UniversalEcharts
  },
  data() {
    return {
      options:
        {
          tooltip: {
            trigger: 'axis',
            axisPointer:
              {
                show: false
              }
          }
          ,
          legend: {
            show: false,
          }
          ,
          grid: {
            left: 18,
            right:18,
            bottom:16,
            top:24,
            containLabel:
              true
          }
          ,
          xAxis: [
            {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
              axisPointer: {
                type: 'shadow'
              },
              axisLabel: {
                interval: 'auto',
                margin: 12,
                textStyle: {
                  color: 'rgba(124, 197, 247, 1)',
                  fontSize: 12
                }
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: 'rgba(41, 92, 136, 1)',
                }
              },
              axisTick: {
                show: false
              }
            }
          ],
          yAxis:
            [
              {
                type: 'value',
                name: '',
                interval: 50,
                axisLabel: {
                  formatter: '{value}',
                  textStyle: {
                    color: 'rgba(124, 197, 247, 1)',
                    fontSize: 12
                  }
                },
                splitLine: {
                  lineStyle: {
                    type: "dashed",
                    width: 0.5,
                    color: 'rgba(41, 92, 136, 1)',
                  }
                }
              }
            ],
          series:
            [
              {
                name: '',
                type: 'bar',
                data: [120, 200, 150, 80, 70, 110, 130],
                itemStyle: {
                  normal: {
                    barBorderRadius: [10, 10, 10, 10],
                    color: echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {offset: 0, color: 'rgba(155, 197, 241, 1)'},
                      {offset: 1, color: 'rgba(21, 141, 253, 1)'}
                    ])
                  },
                },
                emphasis: {
                  itemStyle: {
                    borderWidth: 2,
                    borderColor: '#fff'
                  }
                },
                barWidth: 16
              }
            ]
        }
    }
  }
}
</script>

<style scoped>

</style>
